import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Select,
  Table
} from 'antd'
import React, { useEffect, useState } from 'react'
import MyDatePicker from '../components/MyDatePicker'
import { triggerMsgAPI } from '../service/message'

export default function TouchBehaviorTrigger() {
  const [selectedDateString, setSelectedDateString] = useState()
  // 保存触发消息
  const [triggerMsgList, setTriggerMsgList] = useState([])
  // 查询所有触发消息
  useEffect(() => {
    ;(async () => {
      const res = await triggerMsgAPI()
      console.log(res)
      // 将触发消息由二维数组转为一维数组，并放入到列表
      setTriggerMsgList(res.data)
    })()
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="推送内容" name="storeName">
              <Input style={{ width: 200 }} />
            </Form.Item>
            <Form.Item label="行为条件" initialValue={'0'}>
              <Select
                style={{ width: 200 }}
                placeholder="请选择行为条件"
                options={[
                  {
                    value: '',
                    label: '全部'
                  },
                  {
                    value: '0',
                    label: '启用'
                  },
                  {
                    value: '1',
                    label: '停用'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="推送时间">
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            行为列表
          </Typography.Paragraph>
        </Col>
        <Col span={24}>
          <Table
            // 分页器
            pagination={{ pageSize: 10 }}
            dataSource={triggerMsgList}
            columns={[
              {
                title: '序号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '推送内容',
                dataIndex: 'content',
                key: 'content'
              },
              {
                title: '触发行为',
                dataIndex: 'status',
                key: 'status',
                render: (status) => {
                  // 0-通用 1-点赞  2-收藏 3- 评论 4-分享 5-关注 6-评论回复 7-关注回复 8-点赞回复
                  switch (status) {
                    case 0:
                      return '后台'
                    case 1:
                      return '点赞'
                    case 2:
                      return '评论'
                    case 3:
                      return '关注'
                    case 4:
                      return '转发'
                    case 5:
                      return '收藏'
                    case 6:
                      return '优惠券使用'
                    case 7:
                      return '浏览'
                    case 8:
                      return '搜索'
                    case 9:
                      return '注册'
                    case 10:
                      return '登录'
                  }
                }
              },
              {
                title: '推送时间',
                dataIndex: 'createAt',
                key: 'createAt'
              }
            ]}
          />
        </Col>
      </Row>
    </>
  )
}
